<template>
  <div class="img-container" :style="`width:${size};height:${size};margin-right:${right}`">
    <img :src="iconPath"  />
  </div>    
</template>  
    
  <script>  
  import { computed} from 'vue';  
  export default {  
    name: 'UsernameIcon',  
    props: {  
      icon: {  
        type: String,  
        required: true  
      },
      size:{
        type:String,
      },
      right:{
        type:String,
      }
    },  
    setup(props) {  
      const iconPath = computed(() => { 
        return `${import.meta.env.VITE_BASE_URL}/src/assets/icon/${props.icon}.svg`;  
      });  
      const size = computed(() => {
        return props.size || '20px';
      });
      const right = computed(() => {
        return props.right || '0px';
      });
      return { iconPath,size,right }; 
    }  
  };  
  </script>
  <style scoped> 
  .img-container {
    display: flex;
    align-items: center;
    padding:0 5px;
    position: relative;
    cursor: pointer;
  }
  img {  
    position: absolute;
    width: 70%;
    filter:contrast(1);
  }  
  img:hover {
    filter:contrast(0.1);
  }
  </style>